<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AllBeAPI - 极简工具函数集</title>
    <meta name="description" content="云端极简工具函数集，助力快速原型开发。无需安装依赖，即可使用 Markdown 转换、二维码生成、图像处理等功能。支持 Python 和 JavaScript。">
    <meta name="keywords" content="SDK, API, 极简工具, 快速开发, 原型设计, Markdown, 二维码, 图像处理, Python, JavaScript, 无依赖">
    <meta name="author" content="AllBeAPI 团队">
    
    <!-- Open Graph -->
    <meta property="og:title" content="AllBeAPI - 极简工具函数集">
    <meta property="og:description" content="云端极简工具函数集，助力快速原型开发。无需依赖，即可使用 Markdown、二维码、图像处理等功能。">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://allbeapi.com">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/components.css">
    
    <!-- Preload critical resources -->
    <link rel="preload" href="assets/css/main.css" as="style">
    <link rel="preload" href="assets/js/main.js" as="script">
</head>
<body>
    <!-- Language Switch -->
    <div class="language-switch">
        <div class="container">
            <a href="index.html">English</a> | <a href="index_zh.html" class="active">中文</a>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="navbar">
        <div class="container">
            <div class="navbar-content">
                <a href="#" class="navbar-brand">AllBeAPI</a>
                <ul class="navbar-nav">
                    <li><a href="#about" class="active">关于</a></li>
                    <li><a href="#features">特性</a></li>
                    <li><a href="#usage">使用示例</a></li>
                    <li><a href="docs/index_zh.html">文档</a></li>
                    <li><a href="https://github.com/TingjiaInFuture/allbeapi" target="_blank">GitHub</a></li>
                </ul>
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <button class="theme-toggle" aria-label="切换主题">🌙</button>
                </div>
            </div>
        </div>
    </nav>    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>极简工具函数集，助力快速开发</h1>
                <p>AllBeAPI 是专为快速原型设计和实验而打造的云端工具函数集。提供 Markdown 转换、二维码生成、图像处理等开箱即用的功能 — 无需安装繁重依赖。支持 Python 和 JavaScript，60 秒内即可上手。</p>
                <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
                    <a href="#features" class="btn btn-primary btn-lg">查看功能</a>
                    <a href="https://github.com/TingjiaInFuture/allbeapi" target="_blank" class="btn btn-outline btn-lg">查看 GitHub</a>
                    <a href="docs/index_zh.html" class="btn btn-secondary btn-lg">查看文档</a>
                </div>
            </div>
        </div>
    </section>    <!-- Stats Section -->
    <section class="section">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-card">
                    <span class="stat-number">13+</span>
                    <span class="stat-label">工具函数</span>
                </div>
                <div class="stat-card">
                    <span class="stat-number">0</span>
                    <span class="stat-label">依赖要求</span>
                </div>
                <div class="stat-card">
                    <span class="stat-number">60秒</span>
                    <span class="stat-label">上手时间</span>
                </div>
                <div class="stat-card">
                    <span class="stat-number">MIT</span>
                    <span class="stat-label">开源协议</span>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="section section-alt">
        <div class="container">
            <h2 class="text-center">专为快速原型设计打造</h2>
            <div class="grid grid-2" style="align-items: center; gap: 3rem;">
                <div>
                    <p>AllBeAPI 是一个<strong>极简工具函数集</strong>，帮助开发者在最短时间内完成原型和实验。无需安装配置多个库，只需下载一个 SDK 文件即可开始编码。</p>
                    <div class="alert alert-info">
                        <strong>🚀 完美适用于：</strong> MVP、原型、实验、教育项目和快速功能测试，无需处理依赖管理的负担。
                    </div>
                    <p><strong>核心优势：</strong> 无包管理、统一 API 调用、多语言支持、即时集成。</p>
                    <p><strong>应用场景：</strong> 内容转换、数据验证、图像处理、文档生成、代码格式化。</p>
                </div>
                <div>
                    <div class="code-example">
                        <div class="code-tabs">
                            <button class="code-tab active">JavaScript</button>
                            <button class="code-tab">Python</button>
                        </div>
                        <div class="code-content">
                            <pre class="code-block" data-language="javascript">// 下载 SDK，然后：
const api = new AllBeApi();

// 将 Markdown 转换为 HTML
const html = await api.marked.render("# 你好世界");

// 生成二维码
const qrBlob = await api.pythonQrcode.generateQrcode("https://allbeapi.com");</pre>
                            <pre class="code-block" data-language="python" style="display: none;"># 下载 SDK，然后：
from allbeapi import AllBeApi

api = AllBeApi()

# 将 Markdown 转换为 HTML
html = api.marked.render("# 你好世界")

# 生成二维码  
qr_bytes = api.python_qrcode.generate_qrcode("https://allbeapi.com")</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>    <!-- Features Section -->
    <section id="features" class="section">
        <div class="container">
            <h2 class="text-center">开箱即用的强大功能</h2>
            <p class="text-center" style="font-size: 1.1rem; margin-bottom: 3rem; color: var(--text-secondary);">
                13+ 强大工具，统一 API 接口 - 无需安装，无需配置
            </p>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📝</div>
                    <h3 class="feature-title">Markdown 处理</h3>
                    <p class="feature-description">使用 Marked.js 集成轻松将 Markdown 转换为 HTML，支持扩展和自定义渲染器。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔍</div>
                    <h3 class="feature-title">HTML 解析与操作</h3>
                    <p class="feature-description">利用 BeautifulSoup 解析、提取数据和清理 HTML 内容，具有强大的 CSS 选择器。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">✨</div>
                    <h3 class="feature-title">代码格式化</h3>
                    <p class="feature-description">使用 Prettier 为 JavaScript、TypeScript、CSS、HTML 等语言美化您的代码。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🎨</div>
                    <h3 class="feature-title">语法高亮</h3>
                    <p class="feature-description">使用 Pygments 为您的代码片段添加丰富的语法高亮，支持 500+ 种语言。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📱</div>
                    <h3 class="feature-title">二维码生成</h3>
                    <p class="feature-description">使用 python-qrcode 快速生成二维码，支持各种格式和自定义选项。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🛡️</div>
                    <h3 class="feature-title">HTML 清理</h3>
                    <p class="feature-description">通过 sanitize-html 的强大过滤功能清理 HTML 输入，防止 XSS 攻击。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">✅</div>
                    <h3 class="feature-title">JSON Schema 验证</h3>
                    <p class="feature-description">使用 Ajv（JavaScript 最快的 JSON schema 验证器）根据 Schema 验证 JSON 数据。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔧</div>
                    <h3 class="feature-title">JavaScript/TypeScript Linting</h3>
                    <p class="feature-description">使用 ESLint 分析您的 JavaScript 和 TypeScript 代码，捕获错误并强制执行编码标准。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <h3 class="feature-title">文本差异比较</h3>
                    <p class="feature-description">使用 Diff 比较文本并高亮显示差异，非常适合版本控制和变更跟踪。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📋</div>
                    <h3 class="feature-title">CSV 解析</h3>
                    <p class="feature-description">使用 csv-parser 轻松将 CSV 数据转换为 JSON 格式，处理各种分隔符和格式。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📈</div>
                    <h3 class="feature-title">图表生成</h3>
                    <p class="feature-description">使用 Mermaid CLI 从文本创建图表 - 流程图、序列图等等。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📄</div>
                    <h3 class="feature-title">PDF 生成</h3>
                    <p class="feature-description">使用 PDFKit 以编程方式生成 PDF 文档，支持文本、图像和矢量图形。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🖼️</div>
                    <h3 class="feature-title">图像处理</h3>
                    <p class="feature-description">使用 Pillow 执行各种图像操作 - 调整大小、旋转、过滤和格式转换。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Usage Section -->
    <section id="usage" class="section section-alt">
        <div class="container">
            <h2 class="text-center">易于使用的 SDK</h2>
            <p class="text-center" style="font-size: 1.1rem; margin-bottom: 3rem; color: var(--text-secondary);">
                提供主流语言 SDK，60 秒内即可上手
            </p>
            
            <div class="code-example">
                <div class="code-tabs">
                    <button class="code-tab active">JavaScript</button>
                    <button class="code-tab">Python</button>
                    <button class="code-tab">cURL</button>
                </div>
                <div class="code-content">
                    <pre class="code-block" data-language="javascript">// 确保已引入 allbeapi.js
// &lt;script src="SDK/JavaScript/allbeapi.js"&gt;&lt;/script&gt;

const apiClient = new AllBeApi();

// 示例：将 Markdown 转换为 HTML
apiClient.marked.render("# 你好 AllBeAPI")
    .then(response => {
        console.log(response); // HTML 输出
        // 假设响应是直接的 HTML 字符串或包含它的对象
        // 如果是 { html: "&lt;h1&gt;你好 AllBeAPI&lt;/h1&gt;" } 这样的对象, 请访问 response.html
    })
    .catch(error => console.error("错误:", error));

// 示例：生成二维码 (返回 Blob 对象)
apiClient.pythonQrcode.generateQrcode("https://res.allbeapi.top")
    .then(blob => {
        const imageUrl = URL.createObjectURL(blob);
        console.log("二维码图片 URL:", imageUrl);
        // 然后您可以在 &lt;img&gt; 标签中使用此 URL
        // const imgElement = document.createElement('img');
        // imgElement.src = imageUrl;
        // document.body.appendChild(imgElement);
    })
    .catch(error => console.error("错误:", error));</pre>
                    
                    <pre class="code-block" data-language="python" style="display: none;"># 确保 allbeapi.py 在您的 PYTHONPATH 中或与脚本在同一目录
# from allbeapi import AllBeApi # 假设文件名为 allbeapi.py

# 根据项目结构:
# import sys
# sys.path.append('SDK/Python') # 如果从不同根目录运行，请调整路径
# from allbeapi import AllBeApi

client = AllBeApi()

# 示例：将 Markdown 转换为 HTML
try:
    html_output = client.marked.render("# 你好，来自 Python 的 AllBeAPI")
    print(html_output) # 这很可能是一个 JSON 字符串或字典
except Exception as e:
    print(f"错误: {e}")

# 示例：生成二维码 (返回字节流)
try:
    qr_image_bytes = client.python_qrcode.generate_qrcode("https://res.allbeapi.top")
    with open("example_qrcode_zh.png", "wb") as f:
        f.write(qr_image_bytes) # 如果直接使用 requests，则是 response.content，否则是直接的字节流
    print("二维码已保存至 example_qrcode_zh.png")
except Exception as e:
    print(f"错误: {e}")</pre>
                    
                    <pre class="code-block" data-language="bash" style="display: none;"># 将 Markdown 转换为 HTML
curl -X POST https://res.allbeapi.top/marked/render \
  -H "Content-Type: application/json" \
  -d '{"markdown": "# 你好 AllBeAPI"}'

# 生成二维码
curl -X POST https://res.allbeapi.top/python-qrcode/generate-qrcode \
  -H "Content-Type: application/json" \
  -d '{"data": "https://res.allbeapi.top"}' \
  --output qrcode.png

# 格式化 JavaScript 代码
curl -X POST https://res.allbeapi.top/prettier/format \
  -H "Content-Type: application/json" \
  -d '{"code": "const x=1;", "parser": "babel"}'</pre>
                </div>
            </div>
            
            <div class="text-center mt-4">
                <p>
                    <a href="SDK/JavaScript/allbeapi.js" target="_blank" class="btn btn-outline">📄 JavaScript SDK</a>
                    <a href="SDK/Python/allbeapi.py" target="_blank" class="btn btn-outline" style="margin-left: 1rem;">🐍 Python SDK</a>
                    <a href="docs/api_zh.html" class="btn btn-primary" style="margin-left: 1rem;">📚 完整 API 文档</a>
                </p>
            </div>
        </div>
    </section>

    <!-- Contribute Section -->
    <section id="contribute" class="section">
        <div class="container">
            <h2 class="text-center">贡献力量</h2>
            <div class="grid grid-2" style="align-items: center; gap: 3rem;">
                <div>
                    <p>AllBeAPI 是一个开源项目。我们欢迎社区贡献！无论是添加新的工具集成、改进文档还是修复错误，我们都感谢您的帮助。</p>
                    <div class="alert alert-success">
                        <strong>🎉 加入我们的社区！</strong> 帮助我们构建最全面的轻量级工具平台。
                    </div>
                </div>
                <div class="text-center">
                    <a href="https://github.com/TingjiaInFuture/allbeapi/issues" target="_blank" class="btn btn-success btn-lg">🐛 报告问题</a>
                    <a href="https://github.com/TingjiaInFuture/allbeapi/pulls" target="_blank" class="btn btn-info btn-lg mt-2">🔀 提交拉取请求</a>
                    <a href="docs/contributing_zh.html" class="btn btn-outline btn-lg mt-2">📖 贡献指南</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; <span id="currentYear"></span> AllBeAPI 项目. 基于 MIT 许可证授权。</p>
            <p style="margin-top: 0.5rem; font-size: 0.875rem; opacity: 0.8;">
                由开源社区用 ❤️ 构建
            </p>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="assets/js/main.js"></script>
    <script src="SDK/JavaScript/allbeapi.js"></script>
    <script>
        document.getElementById("currentYear").textContent = new Date().getFullYear();
    </script>
</body>
</html>
